import Nabar from "../../conpoment/Nabar"
import DrugTabs from "../../conpoment/DrugTabs"
import { Button, Swiper } from 'antd-mobile'
import { useNavigate } from 'react-router-dom'
import {
  SearchOutline,
  CheckCircleOutline,
  RightOutline
} from 'antd-mobile-icons'
import { useDrugCategories, defaultTabConfigs } from '../../hooks/useDrugCategories'
import tb1 from '../../img/商店1.png'
import tb2 from '../../img/商店2.png'
import tb3 from '../../img/商店3.png'
import tb4 from '../../img/商店4.png'
import tb5 from '../../img/s-1.png'
import tb6 from '../../img/s-2.png'
import tb7 from '../../img/s-3.png'
import tb8 from '../../img/s-4.png'
import tb9 from '../../img/s-5.png'
import tb10 from '../../img/s-6.png'
import tb11 from '../../img/s-7.png'
import tb12 from '../../img/s-8.png'
import tb13 from '../../img/s-9.png'
import tb14 from '../../img/s-10.png'
import tb15 from '../../img/s-11.png'
import tb16 from '../../img/s-12.png'
import tb17 from '../../img/s-13.png'
import tb18 from '../../img/s-14.png'
import tb19 from '../../img/s-15.png'
import tb20 from '../../img/s-16.png'
import tb21 from '../../img/s-17.png'
import tb22 from '../../img/s-18.png'
import tb23 from '../../img/s-19.png'
import tb24 from '../../img/s-20.png'
import p1 from '../../img/p-1.png'
import p2 from '../../img/p-2.png'
import p3 from '../../img/p-3.png'
import p4 from '../../img/p-4.png'
import Btn from '../../conpoment/btn/index'
import style from './index.module.css'
function Index() {
  const nav = useNavigate()
  // 服务保障数据
  const serviceGuarantees = [
    { icon: <CheckCircleOutline />, text: '正品保障', color: '#52c41a' },
    { icon: <CheckCircleOutline />, text: '隐私发货', color: '#1890ff' },
    { icon: <CheckCircleOutline />, text: '专业药师', color: '#722ed1' },
    { icon: <CheckCircleOutline />, text: '官网直供', color: '#fa8c16' }
  ]
  // 分类数据
  const categories = [
    { icon: tb5, text: '延时持久', color: '#ff4d4f' },
    { icon: tb6, text: '止脱生发', color: '#52c41a' },
    { icon: tb7, text: '妇科炎症', color: '#1890ff' },
    { icon: tb8, text: '平稳降压', color: '#722ed1' },
    { icon: tb9, text: '稳控血糖', color: '#fa8c16' },
    { icon: tb10, text: '领券中心', color: '#f5222d' },
    { icon: tb11, text: '快速降脂', color: '#13c2c2' },
    { icon: tb12, text: '缓解风湿', color: '#eb2f96' },
    { icon: tb13, text: '远离哮喘', color: '#faad14' },
    { icon: tb14, text: '全部分类', color: '#52c41a' },
    { icon: tb15, text: '感冒咳嗽', color: '#ff7875' },
    { icon: tb16, text: '肠胃调理', color: '#95de64' },
    { icon: tb17, text: '失眠多梦', color: '#69c0ff' },
    { icon: tb18, text: '皮肤护理', color: '#b37feb' },
    { icon: tb19, text: '眼部保健', color: '#ffc069' },
    { icon: tb20, text: '口腔护理', color: '#ff9c6e' },
    { icon: tb21, text: '骨骼健康', color: '#87e8de' },
    { icon: tb22, text: '心血管', color: '#ffadd6' },
    { icon: tb23, text: '神经系统', color: '#fff566' },
    { icon: tb24, text: '免疫调节', color: '#d3f261' }
  ]
  // 品牌数据
  const brands = [
    {
      img: p1,
      id: 1
    },
    {
      img: p2,
      id: 2,
    },
    {
      img: p3,
      id: 3
    },
    {
      img: p4,
      id: 4
    }
  ]
  // 轮播广告数据
  const banners = [
    {
      id: 1,
      title: tb2,

    },
    {
      id: 2,
      title: tb4,

    },


    {
      id: 3,
      title: tb1,

    },
    {
      id: 4,
      title: tb3,

    },

  ]
  // 使用药品分类管理 Hook
  const {
    drugList,
    activeTab,
    loading,
    error,
    getFilteredDrugs,
    changeTab
  } = useDrugCategories();
  return (
    <div className={style.storeContainer}>
      <Nabar title='妙手商城' sticky={false} />
      <div>
      {/* 搜索栏 */}
      <div className={style.searchSection}>
        <div className={style.searchBar}>
          <SearchOutline className={style.searchIcon} />
          <input
            type="text"
            placeholder="米诺地尔搽剂"
            className={style.searchInput}
          />
          <Button className={style.searchBtn}>搜索</Button>
        </div>
      </div>
      {/* 轮播广告 */}
      <div className={style.bannerSection}>
        <Swiper autoplay loop>
          {banners.map((banner, index) => (
            <Swiper.Item key={index}>
              <img src={banner.title} alt=""
                onClick={() => nav(`/s_xq1/${banner.id}`)}
                style={{ width: '100%', height: '150px', borderRadius: '15px', cursor: 'pointer', objectFit: 'cover' }} />
            </Swiper.Item>
          ))}
        </Swiper>
      </div>
      {/* 服务保障 */}
      <div className={style.serviceSection}>
        <div className={style.serviceGrid}>
          {serviceGuarantees.map((item, index) => (
            <div key={index} className={style.serviceItem}>
              <div className={style.serviceIcon} style={{ color: item.color }}>
                {item.icon}
              </div>
              <div>
                <span className={style.serviceText}>{item.text}</span>
              </div>
            </div>
          ))}
        </div>
      </div>
      {/* 分类网格 */}
      <div className={style.categorySection}>
        <div className={style.categoryContainer}>
          <div className={style.categoryGrid}>
            {categories.slice(0, 20).map((item, index) => (
              <div key={index} className={style.categoryItem}>
                <div className={style.categoryIcon} style={{ backgroundColor: item.color }}>
                  <img src={item.icon} alt="" style={{ width: '45px', height: '45px', borderRadius: '50%', objectFit: 'contain' }} />
                </div>
                <span className={style.categoryText}>{item.text}</span>
              </div>
            ))}
          </div>
        </div>
        <div className={style.categoryIndicator}></div>
      </div>
      {/* 品牌专区 */}
      <div className={style.brandSection}>
        <div className={style.sectionHeader}>
          <div className={style.titleWithIcon}>
            <h3 className={style.sectionTitle}>品牌专区</h3>
          </div>
          <span className={style.moreLink}>
            <RightOutline />
          </span>
        </div>
        <div className={style.brandScroll}>
          {brands.map((brand, index) => (
            <div key={index} className={style.brandCard}>
              <img src={brand.img} alt="" onClick={() => nav(`/s_xq1/${brand.id}`)}
                style={{ width: '80px', height: '100px', borderRadius: '15px', objectFit: 'contain' }} />
            </div>
          ))}
        </div>
      </div>
      <Btn></Btn>
      <DrugTabs
        drugList={drugList}
        activeTab={activeTab}
        tabConfigs={defaultTabConfigs}
        onTabChange={changeTab}
        getFilteredDrugs={getFilteredDrugs}
        loading={loading}
        error={error}
      />
      </div>
    </div>
  )
}
export default Index